<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />

			<view class="content">
				<view v-if="current === 0&&cardAll.length!==0" v-for="item in cardAll">
					<view class="card" @click="cardDetail(item)">
						<image :src="item.image"></image>
						<text class="card-name">{{item.name}}</text>
						<text class="card-type">{{item.type}}</text>
						<text class="card-price">¥{{item.price}}</text>
					</view>
				</view>
				<view v-if="current === 1&&cardAll.length!==0" v-for="item in cardAll">
					<view class="card">
						<image :src="item.image"></image>
						<text class="card-name">{{item.name}}</text>
						<text class="card-type">{{item.type}}</text>
						<text class="card-price">¥{{item.price}}</text>
						
					</view>

				</view>
				<view v-if="current === 2&&cardAll.length!==0" v-for="item in cardAll">
					<view class="card">
						<image :src="item.image"></image>
						<text class="card-name">{{item.name}}</text>
						<text class="card-type">{{item.type}}</text>
						<text class="card-price">¥{{item.price}}</text>
						
					</view>
				</view>
				<view v-if="current === 3&&cardAll.length!==0" v-for="item in cardAll">
					<view class="card">
						<image :src="item.image"></image>
						<text class="card-name">{{item.name}}</text>
						<text class="card-type">{{item.type}}</text>
						<text class="card-price">¥{{item.price}}</text>
						
					</view>
				</view>
				<view v-if="current === 4&&cardAll.length!==0" v-for="item in cardAll">
					<view class="card">
						<image src="../../static/img/card1.png"></image>
						<text class="card-name">{{item.name}}</text>
						<text class="card-type">{{item.type}}</text>
						<text class="card-price">¥{{item.price}}</text>
					</view>
					
				</view>
				<!-- <uni-load-more :status="status" :content-text="contentText" @clickLoadMore="load()" /> -->
				
			</view>
		</view>
	</view>
</template>
<script>
	
	import {
		baseUrl
	} from '@/config.js'
	import {
		getCardList,
		getCardListByType
	} from '@/api/card.js'
	
	export default {
		data() {
			return {
				current: 0,
				styleType: "text",
				items: ["全部", "期限卡", "次卡"],
				cardAll: [],
				status: 'more',
				statusTypes: [{
					value: 'more',
					text: '加载前',
					checked: true
				}, {
					value: 'loading',
					text: '加载中',
					checked: false
				}, {
					value: 'noMore',
					text: '没有更多',
					checked: false
				}],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				page:1,
				pageSize:5
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				
				if (this.current == 0) {
					this.init()
				} else {
					getCardListByType(this.items[this.current]).then(res => {
						for (var i = 0; i < res.data.data.length; i++) {
							res.data.data[i].image = baseUrl + "/common/download?name=" + res.data.data[i].image
						}
						console.log(res);
						this.cardAll = res.data.data
						this.change(res.data.data)
					})
				}



			},
			change(res) {
				for (var i = 0; i < res.length; i++) {
					if (res[i].type == "期限卡") {
						res[i].type = "期"
					} else if (res[i].type == "储值卡") {
						res[i].type = "储"
					} else if (res[i].type == "次卡") {
						res[i].type = "次"
					}
				}
				console.log(res);
				this.cardAll=res
				
			},
			cardDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/detail/cardDetail?id=" + item.id
				}).then(res => {
					console.log(res);
				})
			},
			init(){
				getCardList().then(res => {
					for (var i = 0; i < res.data.data.length; i++) {
						res.data.data[i].image = baseUrl + "/common/download?name=" + res.data.data[i].image
					}
					console.log(res);
					this.cardAll = res.data.data
					this.change(res.data.data)
				})
			}
		},
		onLoad() {
			this.init()
			
		},

	}
</script>

<style>
	.card {
		width: 80%;
		background-size: 100%;
		margin: auto;
		margin-top: 2vh;
		position: relative;
		height: 25vh
	}

	.card image {
		height: 23vh;
		width: 100%;
		border-radius: 2vh;
		z-index: 1;
		position: absolute;

	}

	.card text {
		position: absolute;
		z-index: 2;
	}

	.card-name {
		font-size: 2.5vh;
		font-weight: bold;
		color: seagreen;
		position: absolute;
		top: 3.5vh;
		left: 2.5vh;
		font-family: "";
	}

	.card-type {
		font-size: 3vh;
		position: absolute;
		right: 2vh;
		top: 2.5vh;
		color: #FCF7F3;
	}

	.card-price {
		font-size: 2vh;
		color: ghostwhite;
		position: absolute;
		top: 17vh;
		font-weight: bold;
		left: 3vh;
	}
</style>